<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        /*样式*/
        h3 {
            font-weight: 350;
            margin: 0;
            padding: 0;
        }

        .item {
            display: inline-block;
            width: 100px;
            height: 30px;
            margin: 15px 10px 10px 0px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #9B9292;
            border-radius: 5px;
            font-size: 16px;
        }

        .active {
            color: red;
            border: 1px solid red;
            font-weight: 700;
        }

        .gift {
            width: 580px;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #9B9292;
        }

        .gift > h3 {
            width: 150px;
            margin: 0 auto;
        }

        .option {
            margin-top: 10px;
        }

        .count span {
            display: inline-block;
            margin-top: 10px;
        }

        .disabled {
            border: 1px dashed #9B9292;
            color: #9B9292;
        }
    </style>
</head>
<body>
<div id='app'>
    <!-- 界面 -->
    <div class="color">
        <h3>颜色</h3>
        <span class="item active">红色</span>
		<span class="item">绿色</span>
    </div>
    <div class="size">
        <h3>尺码</h3>
        <span class="item active">L</span>
		<span class="item">M</span>
    </div>
    <div class="combo">
        <h3>套餐</h3>
        <span class="item active">送皮带</span>
		<span class="item">送袜子</span>
    </div>
    <div class="gift">
        <h3>赠品 袜子</h3>
        <div class="option">
            <h3>规格1</h3>
            <span class="item active">红色</span>
			<span class="item">绿色</span>
        </div>
        <div class="count">
            <h3>数量</h3>
            <span>0</span>
        </div>
    </div>
    <div class="total" >
        <p>合计&nbsp;0</p>
        <p>折扣&nbsp;0</p>
        <p>实付&nbsp;0</p>
    </div>
</div>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        // goods, giftList, promotionList 是接口返回的原始数据，(不能改动，只能用）其他随意发挥
		// 实现商品规格的选择，同时根据显示赠品供用户选择，同时根据促销策略进行优惠
        goods: { /*商品信息*/
            name: '牛仔裤',
            specList: [
                {
                    option1: '蓝色',
                    option2: 'S',
                    option3: '送皮带',
                    price: 100,
                    giftId: 2, /* 关联的 赠品id */
                    giftNumber: 1,/* 送赠品的数量 */
                }, {
                    option1: '蓝色',
                    option2: 'M',
                    option3: '送皮带',
                    price: 100,
                    giftId: 2,
                    giftNumber: 1,
                }, {
                    option1: '红色',
                    option2: 'M',
                    option3: '送皮带',
                    price: 100,
                    giftId: 2,
                    giftNumber: 1,
                }, {
                    option1: '红色',
                    option2: 'L',
                    option3: '送袜子',
                    price: 200,
                    giftId: 1,
                    giftNumber: 1,
                }, {
                    option1: '黄色',
                    option2: 'L',
                    option3: '送皮带',
                    price: 100,
                    giftId: 2,
                    giftNumber: 1,
                }, {
                    option1: '绿色',
                    option2: '均码',
                    option3: '',
                    price: 80
                }, {
                    option1: '黑色',
                    option2: '不分大小',
                    option3: '送袜子',
                    price: 200,
                    giftId: 1,
                    giftNumber: 1,
                }
            ]
        },
        giftList: [ /* 赠品 */
            {
                id: 1,/* 赠品id */
                name: '袜子',/* 赠品名 */
                specList: [/* 赠品规格 */
                    {
                        option1: '黑色',
                        option2: '均码',
                        option3: ''
                    }, {
                        option1: '白色',
                        option2: '均码',
                        option3: ''
                    }
                ]
            },
            {
                id: 2,
                name: '皮带',
                specList: [
                    {
                        option1: '均码',
                        option2: '',
                        option3: ''
                    }
                ]
            }
        ],
        promotionList: [ /* 促销策略，根据用户选择的价格进行满减 */
            {
                type: 1, /* 1代表 合计优惠 */
                price: 100, /* 满100 */
                offPrice: 10 /* 减10 */
            },
            {
                type: 1,
                price: 200, /* 满200 */
                offPrice: 30 /* 减30 */
            }
        ]
    },
    computed: {},
    created () {},
    watch: {},
    methods: {},
})
</script>
</body>
</html>
